<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>相册管理</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script src="jquery/jquery-3.1.1.js"></script>
	<link rel="stylesheet" type="text/css" href="css/StyleSheet.css"/>
	<style type="text/css">
			#tbHeader,#tbBody,#tbAdd{
				color: Black;
                background-color: LightGoldenrodYellow; 
                border: 1px solid Tan; 
                width: 100%; 
                border-collapse: collapse;
			}
			#tbHeader tr{
				background-color: Tan; 
				font-weight: bold;
				line-height: 21px;
				font-size: 13px;
				text-align: center;
				width: 100%;
			}
			#tbBody tr{
				color: #3E4B53;
				width: 100%;
			}
			#tbBody td{
				width: 150px;
			}
			#tbBody tr:nth-of-type(2n){
				background-color: #EEE9A9;
			}
			#tbAdd td{
				width: 150px;
			}
			table tr td:last-of-type{
				width: 150px;
			}
			input[type=text]{
				width: 130px;
			}
		</style>

  </head>
  
	<body>
		<table id="tbHeader">
			<tr>
				<td>
					名称
				</td>
				<td>
					描述
				</td>
				<td>
					<span style="visibility: hidden;">魏文銮</span>
				</td>
			</tr>
		</table>
		<table id="tbBody">
			<tr>
				<td>
					名称1
				</td>
				<td>
					描述1
				</td>
				<td>
					<input type="button" class="edit" value="编辑" />
					<input type="button" id="" value="删除" />
				</td>
			</tr>
			<tr>
				<td>
					名称2
				</td>
				<td>
					描述2
				</td>
				<td>
					<input type="button" class="edit" value="编辑" />
					<input type="button"  id="" value="删除" />
				</td>
			</tr>
		</table>
		<table id="tbAdd" >
			<tr>
				<td >
					<input type="text" name="txtTitle" class="input1" id="txtTitle" required />
				</td>
				<td >
					<input type="text" name="txtDesc" class="input1" id="txtDesc" required />
				</td>
				<td>
					<input type="button" value="添加" />
				</td>
			</tr>
		</table>
		<script type="text/javascript">
			$(':button').addClass('opt_sub');
			$('.edit').each(function(index){
				//设置处于编辑状态
				$(this).data('isEdit',false);
			});
			$('.edit').on('mouseup',function(e){
				if($(this).data('isEdit'))
				{
					$(this).removeClass();
					$(this).addClass('edit');
					$(this).val('编辑');
					$(this).parent().siblings().each(function(index,ele){
						ele.innerText=$(ele).children().val();
					});
				}
				else
				{
					$(this).removeClass();
					$(this).addClass('update');
					$(this).val('更新');
						$(this).parent().siblings().each(function(index,ele){
						$(ele).wrapInner('<input type="text" class="input1" required value="'+ele.innerText+'" />');		
					});
				}
				$(this).data('isEdit',!$(this).data('isEdit'));
				$(':button').addClass('opt_sub');
			});
		</script>
	</body>
</html>


